<template>
  <div class="app-container">
    <div class="userinfo-list-view">
      <el-table :data="tableData3"
                border
                style="width: 100%"
                :row-key="tableData3.user_id">
        <el-table-column prop="user_id"
                         label="ID"
                         width="50">
        </el-table-column>
        <el-table-column prop="username"
                         label="账号">
        </el-table-column>
        <el-table-column prop="nickname"
                         label="昵称">
        </el-table-column>
        <el-table-column prop="attestation"
                         label="认证状态"
                         width="150">
          <template slot-scope="scope">
            <el-tag size="mini"
                    type="danger"
                    v-if="scope.row.attestation === 10">未认证</el-tag>
            <el-tag size="mini"
                    type="success"
                    v-else>已认证</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="delete"
                         label="认证信息"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="infoClickFunc()"
                       plain
                       size="small"
                       type="primary">查看信息</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="delete"
                         label="封禁操作"
                         width="180">
          <template slot-scope="scope">
            <el-button @click="attestationFunc(scope.row.user_id)"
                       type="primary"
                       plain
                       size="small"
                       v-if="scope.row.attestation === 0">确认认证</el-button>
            <el-button @click="attestationFunc(scope.row.user_id)"
                       type="primary"
                       plain
                       size="small"
                       v-else
                       disabled>确认认证</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="用户信息"
               :visible.sync="open"
               width="500px"
               append-to-body
               :close-on-click-modal="false">
      <div>
        <img src="@/assets/SFRZ/DMsfzz.png"
             alt="身份证">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  name: '',
  data() {
    return {
      open: false,
      tableData3: [],
      tableData3: [
        {
          user_id: 1,
          username: 'admin',
          nickname: 'admin',
          attestation: 1,
        },
        {
          user_id: 2,
          username: 'Firudo',
          nickname: 'Firudo',
          attestation: 0,
        },
        {
          user_id: 3,
          username: 'zhangsan',
          nickname: 'zhangsan',
          attestation: 1,
        },
        {
          user_id: 4,
          username: 'Lisi',
          nickname: '李四',
          attestation: 1,
        },
        {
          user_id: 5,
          username: 'wangwu',
          nickname: '王五',
          attestation: 1,
        },
      ],
    }
  },
  methods: {
    attestationFunc(id) {
      this.tableData3.filter((item) => {
        return item.user_id === id
      })[0].attestation = 1
      this.$message({
        message: '该账户认证成功',
        type: 'success',
      })
    },
    infoClickFunc() {
      this.open = true
      console.log('打开弹出框')
    },
  },
}
</script>

<style scoped></style>